<template>
  <div class="parent_content">
    <div class="tiny_content">
      <div class="item">
        <!-- 提审带出 -->
        <div class="tip_img">
          <span>提审</span>
        </div>
        <div class="span_tab">带出</div>
        <div class="colums">
            <div>民警姓名</div>
            <div>房间号</div>
            <div>对象番号</div>
            <div>对象名称</div>
            <div>操作</div>
        </div>
        <div class="list">
          <div class="row" v-for="(item,index) in police_goout" :key="index">
            <div>{{item.regName}}</div>
            <div>{{item.roomNo}}</div>
            <div>{{item.prisoninNo}}</div>
            <div>{{item.dbiName}}</div>
            <div>
              <div class="btn" @click="MakePrison(item.ibrId,item.prisoninNo)">带出</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 会见带出 -->
      <div class="item">
        <div class="tip_img">
          <span>会见</span>
        </div>
        <div class="colums">
            <div>律师姓名</div>
            <div>房间号</div>
            <div>对象番号</div>
            <div>对象名称</div>
            <div>操作</div>
        </div>
        <div class="list">
          <div class="row" v-for="(item,index) in lawyer_goout" :key="index">
            <div>{{item.regName}}</div>
            <div>{{item.roomNo}}</div>
            <div>{{item.prisoninNo}}</div>
            <div>{{item.dbiName}}</div>
            <div>
              <div class="btn" @click="MakePrison(item.ibrId,item.prisoninNo)">带出</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 提审带回 -->
      <div class="item">
        <div class="tip_img">
          <span>提审</span>
        </div>
        <div class="span_tab">带回</div>
        <div class="colums">
            <div>民警姓名</div>
            <div>房间号</div>
            <div>对象番号</div>
            <div>对象名称</div>
            <div>状态</div>
          </div>
          <div class="list">
          <div class="row" v-for="(item,index) in police_goin" :key="index">
            <div>{{item.regName}}</div>
            <div>{{item.roomNo}}</div>
            <div>{{item.prisoninNo}}</div>
            <div>{{item.dbiName}}</div>
            <div>
              <div class="btn" @click="MakePrison(item.ibrId,item.prisoninNo)">带回</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 会见带回 -->
      <div class="item">
        <div class="tip_img">
          <span>会见</span>
        </div>
        <div class="colums">
            <div>律师姓名</div>
            <div>房间号</div>
            <div>对象番号</div>
            <div>对象名称</div>
            <div>状态</div>
        </div>
        <div class="list">
          <div class="row" v-for="(item,index) in lawyer_goin" :key="index">
            <div>{{item.regName}}</div>
            <div>{{item.roomNo}}</div>
            <div>{{item.prisoninNo}}</div>
            <div>{{item.dbiName}}</div>
            <div>
              <div class="btn" @click="MakePrison(item.ibrId,item.prisoninNo)">带回</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 比对弹层 -->
    <el-dialog title="采集比对" :visible.sync="visible" :center='true' :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
      <video style="background-color:black;osition:absolute;transform: rotateY(180deg);" width="350" height="300" ref="video"></video>
      <el-button type="primary" style="margin-top:10px;" @click="confirmCompare">确认比对</el-button>
      <el-button style="margin-left:145px;" @click="closeCompare">取消比对</el-button>
    </el-dialog>
    <!-- 比对结果弹层 -->
    <el-dialog title="比对结果确认" :visible.sync="visible_res" :center='true' :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
        <img :src="CheckPoeople.img_url" width="200" height="200" style="margin:0px auto;display:block;">
        <div class="show_item">
          <span>姓名：</span>
          <span>{{CheckPoeople.name}}</span>
        </div>
        <div class="show_item">
          <span>番号：</span>
          <span>{{CheckPoeople.ObjectNUmber}}</span>
        </div>
        <div class="show_item" style="width:90%;">
          <span>房间号：</span>
          <span>{{CheckPoeople.roomNumber}}</span>
        </div>
        <div class="show_item" style="display:flex;justify-content: space-between;">
          <el-button type="success" @click="emitpersoninfo">确认信息</el-button>
          <el-button type="danger" @click="visible_res = false;$refs.video.play()">错误比对</el-button>
        </div>
    </el-dialog>
    <!-- 图像转换节点 -->
  <canvas ref="cvs" width="350" height="300"></canvas>
  </div>
</template>

<script>
const faceapi = require('face-api')
export default {
  name: 'comparison',
  data () {
    return {
      visible: false, // 弹层显示标志
      CloseObj: null, // 弹层关闭对象
      police_goout: [], // 民警即将带出
      lawyer_goout: [], // 律师即将带出
      police_goin: [], // 民警将带回
      lawyer_goin: [], // 律师将带回
      currentId: -1, // 当前提审的人的ID
      visible_res: false, // 比对结果弹层显示
      currentPersonId: -1, // 当前对象的番号
      CheckPoeople: { // 检测出的人员信息
        name: '',
        ObjectNUmber: '',
        roomNumber: '',
        img_url: ''
      },
      CancelLoop: false
    }
  },
  methods: {
    emitpersoninfo () { // 确认比对
      this.$http.POST('comparison:MakePrison', { id: this.currentId, state: 1 }).then((res) => {
        this.$message.success(res.data.msg)
        if (res.data.code === 200) {
          this.closeCompare()
        }
      })
    },
    async LoopCheck () { // 实时勾连
      const ctx = this.$refs.cvs.getContext('2d')
      ctx.drawImage(this.$refs.video, 0, 0, 350, 300)
      const options = new faceapi.TinyFaceDetectorOptions()
      const detections = await faceapi.detectAllFaces(this.$refs.cvs, options)
      const resizedDetections = faceapi.resizeResults(detections, { width: 350, height: 300 })
      this.$refs.checkres.getContext('2d').clearRect(0, 0, 350, 300)
      resizedDetections.forEach((item, i) => {
        const box = resizedDetections[i].box
        const drawBox = new faceapi.draw.DrawBox(box)
        drawBox.draw(this.$refs.checkres)
      })
      if (!this.CancelLoop) {
        this.LoopCheck()
      }
    },
    // 获取最新的数据
    GetData () {
      this.$http.GET('comparison:GetPrisoners', { areaNo: this.$route.query.areaNo }).then((res) => {
        this.police_goout = []
        this.lawyer_goout = []
        this.police_goin = []
        this.lawyer_goin = []
        res.data.data.forEach((item) => {
          if (item.regType === 3) {
            this[item.ibrType === 0 ? 'lawyer_goout' : 'lawyer_goin'].push(item)
          } else {
            this[item.ibrType === 0 ? 'police_goout' : 'police_goin'].push(item)
          }
        })
      })
    },
    // 民警操作
    MakePrison (id, _) {
      this.currentId = id
      this.currentPersonId = _
      this.startCompare()
    },
    startCompare () { // 开始比对
      this.visible = true
      window.navigator.getUserMedia({
        video: {
          width: 350,
          height: 300
        }
      }, (stream) => {
        this.$refs.video.srcObject = stream
        this.$refs.video.play()

        this.CloseObj = typeof stream.stop === 'function' ? stream : stream.getTracks()[0]
        Promise.all([
          faceapi.nets.tinyFaceDetector.load(`https://${process.env.NODE_ENV === 'production' ? '38.145.205.142' : '172.19.23.157:8085'}/checkface/tiny_face_detector_model-weights_manifest.json`)
        ]).then(() => {
          this.CancelLoop = false
          this.LoopCheck()
        })
      }, () => {
        this.$message.error('未能正确打开摄像头')
      })
    },
    closeCompare () { // 结束比对并关闭弹层
      this.visible_res = false
      this.visible = false
      this.$refs.video.pause()
      this.CloseObj.stop()
      // this.CancelLoop = true
    },
    confirmCompare () { // 确认比对按钮
      this.$refs.video.pause()
      const ctx = this.$refs.cvs.getContext('2d')
      ctx.drawImage(this.$refs.video, 0, 0, 350, 300)
      const data = new FormData()

      data.append('params', `{"extra_fields":["idcard_no","work_no"],"order":{"similarity":-1},"start":0,"limit":1,"retrieval":{"picture_image_content_base64":"${this.$refs.cvs.toDataURL('image/png', 1).split(',')[1]}","repository_ids":["37"],"threshold":80}}`)
      this.$http.POST('comparison:CompareFace', data, null, { 'Content-Type': 'multipart/form-data' }).then(async (res) => {
        if (res.data.results) {
          if (res.data.results.length > 0) {
            const $res = await this.$http.POST('comparison:GetPersonInfo', null, { ids: this.currentPersonId })
            const index = res.data.results.findIndex(($) => { return $.person_id === $res.data.data[0].id })
            if (index > -1) {
              this.CheckPoeople.ObjectNUmber = res.data.results[index].dbiStaffPrisoninNo
              this.CheckPoeople.name = res.data.results[index].dbiName
              this.CheckPoeople.roomNumber = res.data.results[index].dbiPrisonRoomNo
              this.CheckPoeople.img_url = $res.data.data[0].photoUrl
              this.visible_res = true
              return
            }
          }
        }
        this.$message.error('比对失败，请重新比对')
        this.$refs.video.play()
      })
    }
  },
  destroyed () { // 页面销毁时
    this.CloseObj.stop()
  },
  mounted () {
    // this.startCompare()
    this.GetData()
    // 监听duty事件即时刷新
    this.$ws.CreateEvent('comparison', (e) => {
      if (JSON.parse(e.data).msgType === 'refresh-record' || JSON.parse(e.data).msgType === 'new-record') {
        this.GetData()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.parent_content{
  width: 100%;
  height: 100%;
  background: url('../assets/comparison/background.jpg') no-repeat;
  background-size: 100% 100%;
    overflow: hidden;
  .tiny_content{
    width: 100%;
    height: calc(100% - 100px);
    margin-top:100px;
    box-sizing: border-box;
    padding: 10px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item{
      width: 48%;
      height: 45%;
      position: relative;
      margin-bottom: 35px;
      background:url('../assets/comparison/border.png') no-repeat;
      background-size: 100% 100%;
      &:nth-child(odd){
        margin-left: 10px;
      }
      .tip_img{
        width: 120px;
        height: 32px;
        position: absolute;
        background: url('../assets/comparison/tip_img.png') no-repeat;
        background-size: 100% 100%;
        color: #97e9fe;
        text-align: center;
        text-indent: 30px;
        line-height: 2.3;
        left: 0;
        top: -33px;
        span{
          letter-spacing: 10px;
        }
      }
      .span_tab{
        width: 20px;
        height: 80px;
        text-align: center;
        color: white;
        font-size: 14px;
        background-color: #014886;
        line-height: 30px;
        position: absolute;
        top: 15px;
        left: -23px;
      }
      .colums{
        width: 100%;
        height: 40px;
        background:url('../assets/comparison/colums.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
          min-width: 20%;
          font-size: 12px;
          text-align: center;
          color: #70e2e5;
        }
      }
      .list{
        width: 100%;
        height: calc(100% - 44px);
        overflow: auto;
        .row{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .btn{
            width: 50px;
            height: 25px;
            background:url('../assets/comparison/make.png') no-repeat;
            background-size: 100% 100%;
            line-height: 25px;
            margin: 0px auto;
          }
          div{
            font-size: 12px;
            min-width: 20%;
            text-align: center;
            color: white;
          }
        }
      }
    }
  }
  .show_item{
      width: 80%;
      margin: 0px auto;
      overflow: hidden;
      margin-top: 20px;
      span{
        font-weight: bold;
        font-size: 20px;
        color: #333;
      }
  }
}
</style>
